@extends('Home/Layout/base')

@section('title', '欢迎光临鞋城')


{{-- 首页导航栏 --}}
@section('nav')

    @include('Home/Layout/index_nav')

@endsection


{{--  首页主体  --}}
@section('main')
    
    {{--  侧边分类栏以及轮播图  --}}
    @include('Home/Index/aside_nav')


    {{--  特惠促销  --}}
    @include('Home/Index/home_promotion')
    
    {{-- 热卖促销 --}}
    @include('Home/Index/home_hotsale')

    {{-- 首页主体(懒加载) --}}
    @include('Home/Index/home_main')


@endsection


@section('footer-js')
    
    
    <script type="text/javascript">

        //懒加载
        $(window).on('scroll', function () {

            //只对拥有lazyload的class属性值才懒加载
            $('div.lazyload').each(function () {

                // console.log(332); return;

                var that = $(this);

                var sortnum = $(this).attr('sortnum');
                // console.log(sortnum);
                
                //获取滚动条高度
                var scrollHeigth = $(document).scrollTop();
                //获取窗口高度
                var windowHeight = $(window).height();
                //获取本div距离文档顶的高度
                var divHeight = $(this).offset().top;

                //当要懒加载的div显示在窗口超过100px时调用ajax进行懒加载
                if ( ((scrollHeigth + windowHeight - 100) > divHeight) && ($(this).attr('isrequest') == 0) ) {

                    // console.log(321);
                    // console.log(sortnum);

                    if (true) {//通过某些判断才去加载,先留下来
                        
                        //备注已经请求过了,下次不再请求
                        $(this).attr('isrequest', 1);

                        var originInnerHtml = $(this).html();
                        // console.log(originInnerHtml);

                        $.ajax({

                            type : 'get',
                            url : '{{url("/indexhotlazyload")}}',
                            data : '_token={{csrf_token()}}&sortnum=' + sortnum ,
                            dataType : 'json',

                            beforeSend : function () {

                                //显示loading的图片
                                var str = `<div style="width:1349px; height:510px; background-color:white;display: table-cell;vertical-align: middle;text-align: center;">
                                    <img src="{{asset('images/lazyloading.gif')}}" align="middle" style="width:300px; height:300px;" />
                                </div>`; 
                                that.html(str);

                            },

                            success : function (data) {

                                console.log(data);
                                // console.log(typeof data);
                                // console.log(JSON.parse(data));
                                
                                //拼接整个栏目的数据
                                if (data.result.code == 200){

                                    var str = '';
                                    // console.log(33221);

                                        str += 
                                        `<div class="home-tit">
                                            <span class="ico sg"></span>
                                            <div class="tit">` + data.sname + `</div>
                                            <div class="more">`;

                                        for(var i = 0; i<data.sonsort.length; i++){

                                            str += '<a href="{!!asset("goodslist?sortid=' + data.sonsort[i].id + ' ")!!}">' + data.sonsort[i].sname + '</a>';  //拼接二级分类
                                        }
                                            
                                        str += `</div></div>`;
  
                                        str += 
                                        `<div class="home-floor clearfix">
                                            <div class="floor-ad">`;

                                        //拼接广告位
                                        if(data.sortpromot){
                                            str += `<a href="{{asset('goods-detail/` + data.sortpromot.gid + `')}}">
                                                <img src="` + data.sortpromot.path + `" alt="" />
                                            </a>`;
                                        } else {
                                            //如果没有促销的广告,也用一个图片或其他提示占领着
                                            str += `<a href="javascript:;">广告位待放置
                                                </a>`;
                                        }
                                                
                                        str += `</div>
                                            <div class="floor-goods">`;

                                        //拼接商品
                                        for(var i = 0; i<data.goodslist.length; i++){

                                            str += 
                                            `<div class="item">
                                                <a href="{{asset('goods-detail/` + data.goodslist[i].id + `')}}">
                                                    <img src="` + data.goodslist[i].pic + `" alt="" class="figure" />
                                                </a>
                                                <div class="name">
                                                    <a href="{{asset('goods-detail/`+ data.goodslist[i].id + `')}}">` +
                                                    data.goodslist[i].gname
                                                    + `</a>
                                                </div>
                                                <div class="price">` +
                                                    data.goodslist[i].price
                                                + `元</div>
                                            </div>
                                            `;
                                        }
                                        
                                        // console.log(str);

                                        that.html('');
                                        // that.append(originInnerHtml);
                                        that.append(str);

                                        //获取当前有多少个懒加载
                                        var lazyLoadDivNum = $('div.lazyload').length;
                                        //下一个懒加载的div,并且附上要传到ajax的php的sortnum,决定查找第几个根分类的信息
                                        var nextDiv = 
                                        `<div class="lazyload" sortnum="` + lazyLoadDivNum + `" isrequest="0">
                                        </div>`;

                                        that.parent().append(nextDiv);

                                } else if (data.result.code == 404) {

                                    that.html('');

                                    str = '<p class="bg-success text-center lead" style="font-size:33px;">End</p>';

                                    that.append(str);

                                }

                            }

                        });

                    }

                }


            });

        });




    </script> 
    
    
@endsection

